import React, { useEffect } from "react"
import { Row, Card, Table, Col } from "antd"
import userImg from "../../assets/images/user.png"
import "./index.scss"
import dayjs from "dayjs"
import { useState } from "react"
import { columns, countData } from "./data"
import type { EchartsProp, IconName } from "./types"
import * as Icon from '@ant-design/icons'
import MyEcharts from '../../components/Echarts'
import { getData } from "../../api"

// 动态获取icon
const iconToElement = (name: IconName) => React.createElement(Icon[name])

export default function NewHome () {
  const currentTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm')

  // 定义table数据
  const [tableData, setTableData] = useState([])

  // 创建echarts响应数据
  const [echartData, setEchartData] = useState<EchartsProp>({})

  useEffect(() => {
    getData().then(({ data }) => {
      const { tableData, orderData, userData, videoData } = data.data
      setTableData(tableData)

      // 对于echarts响应数据
      const order = orderData

      // x轴的数据
      const xData = order.date

      // series数据组装
      const keyArray = Object.keys(order.data[0])
      const series: Record<string, any>[] = []

      keyArray.forEach(key => {
        series.push({
          name: key,
          data: order.data.map((item: Record<string, any>) => item[key]),
          type: 'line'
        })
      })

      setEchartData({
        order: {
          xData,
          series
        },
        user: {
          xData: userData.map((item: Record<string, any>) => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map((item: Record<string, any>) => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map((item: Record<string, any>) => item.active),
              type: 'bar'
            },
          ]
        },
        video: {
          series: [
            {
              data: videoData,
              type: 'pie'
            }
          ]
        }
      })
    })
  }, [])

  return (
    <div>
      <Row className="home">
        <Col span={8}>
          <Card hoverable style={{ marginBottom: "20px" }}>
            <div className="user">
              <img src={userImg} alt="用户头像" />
              <div className="userinfo">
                <p className="name">Admin</p>
                <p className="access">超级管理员</p>
              </div>
            </div>

            <div className="login-info">
              <p>上次登录时间：<span>{currentTime}</span></p>
              <p>上次登录地点：<span>成都</span></p>
            </div>
          </Card>

          <Card hoverable style={{ marginBottom: "20px" }}>
            <Table rowKey={"name"} pagination={false} columns={columns} dataSource={tableData}></Table>
          </Card>
        </Col>

        <Col span={16}>
          <div className="num">
            {
              countData.map((item) => {
                return (
                  <Card key={item.id} hoverable className="num-item">
                    <div className="icon-box" style={{ background: item.color }}>
                      {iconToElement(item.icon)}
                    </div>
                    <div className="detail">
                      <p className="num">￥ {item.value}</p>
                      <p className="txt">{item.name}</p>
                    </div>
                  </Card>
                )
              })
            }
          </div>
          {echartData.order && <MyEcharts chartData={echartData.order} style={{ height: "280px" }} />}

          <div className='graph' style={{ display: "flex" }}>
            {echartData.user && <MyEcharts chartData={echartData.user} style={{ height: "240px", width: '50%' }} />}
            {echartData.video && <MyEcharts chartData={echartData.video} isAxisChart={false} style={{ height: "260px", width: '50%' }} />}
          </div>
        </Col>
      </Row>
    </div>
  )
}
